<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- <script src="js/bootstrap.bundle.min.js"></script> -->
<style>
    #body {
        background: url("image/bjtp.png") no-repeat;
        background-size: cover;
        margin: auto;
        width: 100vw;
        height: 100vh;
        position: relative;
        /* overflow-y: hidden; */
    }

    .huanhang {
        width: 100px;
        margin-left: 20px;

    }

    .custom-tooltip-box {
        display: none;
        width: 158px;
        height: 84px;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
        /* background: url("image/Rectangle\ 24@2x.png") no-repeat; */
        background-size: 160px;
    }

    .wangx {
        display: none;
        width: 229px;
        height: 70px;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
        background: url("../周子豪/img/Rectangle\ 24.png") no-repeat;
        background-size: 220px;
    }

    .name {
        font-size: 14px;
        /* margin-left: 20px; */
        display: inline;
        color: #fff;
    }

    .names {
        font-size: 14px;
        /* margin-left: 20px; */
        display: inline-block;
        color: #fff;
    }

    .size {
        /* margin-top: -10px; */
        font-size: 14px;
        display: block;
    }

    .sizea {
        /* margin-top: -10px; */
        font-size: 14px;
        display: block;

    }

    .writing {
        text-align: center;
        line-height: 20px;
        display: inline-block;
        width: 55px;
        background: linear-gradient(180deg, rgba(48, 135, 229, 1) 0%, rgba(255, 255, 255, 1) 100%);
        -webkit-background-clip: text;
        /* 使用-webkit-前缀兼容部分浏览器 */
        background-clip: text;
        color: transparent;
        text-shadow: 0px 0px 6px rgba(53, 219, 255, 1);

    }

    .title {
        font-size: 14px;
        color: #fff;
    }




    .contetn {
        width: 33vw;
        height: 100vh;
        display: inline-block;
    }

    .leftinfo {
        width: 33vw;
        height: 33vh;
        /* border: 1px solid red; */
        background-color:red ;
        display: inline-block;

    }
    .contentinfo{
        width: 33vw;
        height: 33vh;
        /* border: 1px solid red; */
        background-color:black ;
        display: inline-block;

    }
    .rightinfo{
        width: 33vw;
        height: 33vh;
        /* border: 1px solid red; */
        background-color:blue ;
        display: inline-block;
    }

    #roundpillars {
        height: 270px;
        width: 33vw;
        margin: auto;

    }

    #container {
        height: 250px;
        width: 33vw;
        margin: auto;
    }

    #main {
        height: 250px;
        width: 33vw;
        margin: auto;
    }

    #synthesis {
        height: 260px;
        width: 33vw;
        margin: auto;
    }

    #increment {
        height: 250px;
        width: 33vw;
        margin: auto;
    }

    #stackeddiagrams {
        height: 300px;
        width: 33vw;
        margin: auto;
    }

    #welfare{
        height: 250px;
        width: 33vw;
       margin:auto;
       /* display: inline-block; */
    }
.rightTable{
        height: 250px;
        width: 33vw;
      margin: auto;
    }

    #educate{
        height: 400px;
        width: 33vw;
      margin: auto;
    }
</style>

<body id="body">
    <!-- <div class="row">
        <div class="col-md-4">
            <img src="image/矩形.png" alt="" class="topJuxing">
            <img src="image/Rectangle 17.png" class="biank">

            <div class="topTitle">贵州院数字化综合运营平台</div>
        </div>
        <img src="image/Rectangle 21.png" class="biank2">
        <div class="col-md-1 topText"><img src="image/Rectangle 4034.png" class="topText2"><span class="cursor" >门户首页</span></div>
        <div class="col-md-1 topText"><img src="image/Rectangle 4034.png" class="topText2"><span class="cursor">办公中心</span></div>
        <div class="col-md-1 topText"><img src="image/Rectangle 4034.png" class="topText2"><span class="cursor">数据中心</span></div>
        <div class="col-md-1 topText"><img src="image/Rectangle 4034.png" class="topText2"><span class="cursor">标准知识库</span></div>
        <div class="col-md-1 col-md-offset-3 topRightText"><img src="image/Frame.png"> <span class="cursor">我的待办</span></div>
        <div class="col-md-1 col-md-offset-1 topRightText"><img src="image/Frame (1).png"><span class="cursor">我的已办</span> </div>
        <div class="col-md-1 col-md-offset-1 topRightText"><img src="image/Frame (2).png"> <span class="cursor">我的消息</span></div>
        <div class="col-md-1 col-md-offset-3 topRightText"><span class="cursor">郭旗</span></div>
    </div> -->
    <div>
        <div class="contetn">
            <div class="leftinfo">
                <!-- <div class="searchBox">
                    <p class="textK">收入总额</p>
                    <ul>
                        <li> <input class="elementD" type="date"></li>
                        <li> <input class="elementD" type="date"></li>
                        <li><select class="elementD" id="performance">
                                <option>请选择</option>
                            </select></li>
                        <li> <a class="elementD backF cursor">图形放大</a></li>
                    </ul>
                    <div id="spot"></div>
                    <div id="bottomLine"></div>
                    <div id="blueFast"></div>
                </div>

                <div id="roundpillars"></div> -->
            </div>
            <div class="leftinfo">
                <!-- <div class="searchBox">
                    <p class="textK">综合统计</p>
                    <ul>
                        <li> <input class="elementD" type="date"></li>
                        <li> <input class="elementD" type="date"></li>
                        <li><select class="elementD" id="performance">
                                <option>请选择</option>
                            </select></li>
                        <li> <a class="elementD backF cursor">图形放大</a></li>

                    </ul>
                    <div id="spot"></div>
                    <div id="bottomLine"></div>
                    <div id="blueFast"></div>
                </div>
                <div id="synthesis"></div> -->
            </div>
            <div class="leftinfo">
                <!-- <div class="searchBox">
                    <p class="textK" >绩效分配</p>
                    <ul>
                        <li> <input class="elementD" type="date"></li>
                        <li> <input class="elementD" type="date"></li>·
                        <li><select class="elementD" id="performance">
                                <option>请选择</option>
                            </select></li>
                        <li> <a class="elementD backF cursor">图形放大</a></li>

                    </ul>
                    <div id="spot"></div>
                    <div id="bottomLine"></div>
                    <div id="blueFast"></div>
                </div>
                <div id="stackeddiagrams"></div> -->

            </div>
        </div>

        <div class="contetn">
            <div class="contentinfo">
                <!-- <div class="searchBox">
                    <p class="textK">保险缴纳</p>
                    <ul>
                        <li> <input class="elementD" type="date"></li>
                        <li> <input class="elementD" type="date"></li>
                        <li><select class="elementD" id="performance">
                                <option>请选择</option>
                            </select></li>
                        <li> <a class="elementD backF cursor">图形放大</a></li>

                    </ul>
                    <div id="spot"></div>
                    <div id="bottomLine"></div>
                    <div id="blueFast"></div>
                </div>

                <div id="container"></div> -->
            </div>
            <div class="contentinfo">
                <!-- <div class="searchBox">
                    <p class="textK">教育培训</p>
                    <ul>
                        <li> <input class="elementD" type="date"></li>
                        <li> <input class="elementD" type="date"></li>
                        <li><select class="elementD" id="performance">
                                <option>请选择</option>
                            </select></li>
                        <li> <a class="elementD backF cursor">图形放大</a></li>

                    </ul>
                    <div id="spot"></div>
                    <div id="bottomLine"></div>
                    <div id="blueFast"></div>
                </div>
                <div id="educate"></div> -->
            </div>
            <div class="contentinfo">
                <!-- <div class="searchBox">
                    <p class="textK">人工成本</p>
                    <ul>
                        <li> <input class="elementD" type="date"></li>
                        <li> <input class="elementD" type="date"></li>
                        <li><select class="elementD" id="performance">
                                <option>请选择</option>
                            </select></li>
                        <li> <a class="elementD backF cursor">图形放大</a></li>
                    </ul>
                    <div id="spot"></div>
                    <div id="bottomLine"></div>
                    <div id="blueFast"></div>
                </div>
                <div class="rightTable" id="option"></div> -->
            </div>
        </div>
        <div class="contetn">
            <div class="rightinfo">
                <!-- <div class="searchBox">
                    <p class="textK">保险缴纳</p>
                    <ul>
                        <li> <input class="elementD" type="date"></li>
                        <li> <input class="elementD" type="date"></li>
                        <li><select class="elementD" id="performance">
                                <option>请选择</option>
                            </select></li>
                        <li> <a class="elementD backF cursor">图形放大</a></li>

                    </ul>
                    <div id="spot"></div>
                    <div id="bottomLine"></div>
                    <div id="blueFast"></div>
                </div>
                <div id="main"></div> -->
            </div>
            <div class="rightinfo">
                <!-- <div class="searchBox">
                    <p class="textK">公积金、增量</p>
                    <ul>
                        <li> <input class="elementD" type="date"></li>
                        <li> <input class="elementD" type="date"></li>
                        <li><select class="elementD" id="performance">
                                <option>请选择</option>
                            </select></li>
                        <li> <a class="elementD backF cursor">图形放大</a></li>

                    </ul>
                    <div id="spot"></div>
                    <div id="bottomLine"></div>
                    <div id="blueFast"></div>
                </div>
                <div id="increment"></div> -->
            </div> 
            <div class="rightinfo">
                <!-- <div class="searchBox">
                    <p class="textK">福利发放</p>
                    <ul>
                        <li> <input class="elementD" type="date"></li>
                        <li> <input class="elementD" type="date"></li>
                         <li><select class="elementD" id="performance">
                                <option>请选择</option>
                            </select></li>
                        <li> <a class="elementD backF cursor">图形放大</a></li>

                    </ul>
                    <div id="spot"></div>
                    <div id="bottomLine"></div>
                    <div id="blueFast"></div>
                </div>
                <div class="col-md-3 " id="bing">
                    <img class="juxing" src="image/Rectangle.png" alt="">
                    <img class="juxing ju2" src="image/Rectangle.png" alt="">
                    <div id="welfare"></div>
                 </div> -->
            </div>
        </div>
    </div>
    <!-- <div id="roundpillars" style="height: 266px;width: 497px;display: inline-block;"></div>
    <div id="container" style="height: 178px;width: 178px; margin-left: 300px; display: inline-block;"></div>
    <div id="main" style="width: 600px;height:300px;"></div>
    <div id="synthesis"></div>
    <div id="stackeddiagrams"></div> -->



</body>
<script type="text/javascript" src="../echarts5.4.4.min.js"></script>
<script src="js/sumjs.js"></script>


<script>
    // 收入总额柱状图
    getroundpillars("roundpillars");
    // 保险缴纳饼状图
    getcontainer("container");
    // 保险缴纳折线图
    getmin("main");
    // 综合统计
    getsynthesis("synthesis");
    // 绩效分配堆叠图
    getstackeddiagrams("stackeddiagrams");
    // 公积金
    getincrement("increment");
    // 福利发放
    getwelfare("welfare");
    // 人工成本
    getrightTable("option");
    // 教育培训
    geteducate("educate");

</script>

</html>